.left-tabs {
  display: flex;

  .tabs {
    flex-shrink: 0;
    width: 190px;
    height: calc(100vh - 120px);
    overflow-y: auto;
    background: white;

    .tab {
      width: 100%;
      height: 96px;
      font-size: 30px;
      font-weight: 400;
      color: rgba(116, 121, 120, 1);
      text-align: center;
      line-height: 96px;

      &.active {
        position: relative;
        background: #f8f9fa;
        font-size: 30px;
        font-weight: 500;
        color: rgba(38, 45, 44, 1);

        &:before {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          content: '';
          width: 6px;
          height: 26px;
          background: linear-gradient(313deg,
          rgba(15, 228, 204, 1) 0%,
          rgba(43, 125, 206, 1) 100%);
        }
      }
    }
  }

  .contents {
    margin: 24px 0 30px 24px;
    flex: 1;
    height: calc(100vh - 120px);
    overflow-y: auto;

    img.top-img {
      width: 506px;
      height: 230px;
    }
  }
}

.good-state-bar-wrap {
  background: white;
  box-shadow: 8px 16px 24px 0 rgba(159, 187, 186, 0.18);

  .good-state-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 28px;
    font-weight: 500;
    color: rgba(38, 45, 44, 1);
    padding: 36px 0 44px;
  }

  .state-bar-item {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: 400;
    color: rgba(116, 121, 120, 1);

    &:nth-last-child(2) {
      width: 100px;
    }

    &.active {
      color: rgba(38, 45, 44, 1);
      font-weight: 500;
    }

    .btn-triangle {
      position: absolute;
      width: 20px;
      height: 20px;
      left: 0;
      right: 0;
      bottom: -28px;
      margin: auto;
    }

    .btn-arrange {
      width: 44px;
      height: 44px;
    }

    .sort {
      width: 36px;
      height: 36px;
    }
  }
}
